import React, { useEffect, useState, useRef } from 'react';
import { Button, Select, Pagination, Form, Input } from 'antd';
import api from '../../../../api';
import { useMappedState, useDispatch } from 'redux-react-hook';
import {
    set_addVisible,
    set_delVisible,
    set_delId,
    set_modalTitle,
    set_modalForm,
} from '../../../../store/action/house';
import MessageTable from './components/Table';
import DelMessage from './components/DelMessage';
import AddMessage from './components/AddMessage';

import './index.css'

const Order = () => {
    const dispatch = useDispatch();
    // 获取元素内容
    const form = useRef<any>(null);
    // 变量
    // 团购列表
    const [orderList, setOrderList] = useState<any>([]);
    // 页码
    const [pageIndex, setPageIndex] = useState<number>(1);
    // 每页的数量
    const [pageSize, setPageSize] = useState<number>(5);
    // 总数
    const [total, setTotal] = useState<number>(0);
    // 资讯名称
    const [title, setTitle] = useState<string>('');
    // 状态
    const [status, setStatus] = useState<string>('');
    // 生命周期
    useEffect(() => {
    }, []);
    // 监听状态的变化
    useEffect(() => {
        getMessageList();
    }, [pageIndex, title, status])
    // 方法
    // 获取团购列表
    const getMessageList = () => {
        api.getMessageList({
            pageIndex,
            pageSize,
            title,
            state: status
        }).then((res: any) => {
            if (res.success) {
                setOrderList(res.data.data)
                setTotal(res.data.total);
            }
        })
    };
    // 页码改变
    const pageChange = (num: number) => {
        setPageIndex(num);
    }
    // 点击搜索按钮
    const onFinish = async (values: any) => {
        setTitle(values.title);
        setStatus(values.state);
        // 让页码重置
        setPageIndex(1)
    };
    // 点击重置按钮
    const reset = () => {
        // 清空表单
        form.current.resetFields()
    }
    // 删除
    const delMessage = (id: string) => {
        dispatch(set_delVisible(true))
        // 把id存储起来
        dispatch(set_delId(id));
    }
    // 点击新增
    const addMessage = () => {
        dispatch(set_addVisible(true));
        dispatch(set_modalTitle('新增'));
    }
    // 点击编辑
    const editMessage = (item: any) => {
        dispatch(set_addVisible(true));
        dispatch(set_modalTitle('编辑'));
        dispatch(set_modalForm(item));
    };
    return (
        <div className="message">
            <div className="header-message">
                资讯管理
            </div>
            <div className="wrapper-message">
                {/*  */}
                <div className="search-message">
                    <Form
                        layout="horizontal"
                        onFinish={onFinish}
                        ref={form}
                    >
                        <Form.Item name="title" label="搜索">
                            <Input placeholder='资讯名称'
                            />
                        </Form.Item>
                        <Form.Item label="状态" name="state">
                            <Select placeholder="请选择"
                                style={{ width: 200 }}
                            >
                                <Select.Option value="1">开启</Select.Option>
                                <Select.Option value="0">关闭</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary"
                                onClick={reset}
                            >重置</Button>
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary"
                                htmlType="submit"
                            >查询</Button>
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary"
                                onClick={()=>{addMessage()}}
                            >新增</Button>
                        </Form.Item>
                    </Form>
                </div>
                {/*  */}
                <MessageTable dataSource={orderList}
                    getMessageList={() => { getMessageList() }}
                    delMessage={(id: string) => { delMessage(id) }}
                    editMessage={(item: any) => { editMessage(item) }}
                ></MessageTable>
                {/*  */}
                <div className="pag-message">
                    <Pagination current={pageIndex} total={total} pageSize={pageSize} onChange={pageChange} />
                </div>
                {/*  */}
                <DelMessage getMessageList={() => { getMessageList() }}></DelMessage>
                {/*  */}
                <AddMessage
                    getMessageList={() => { getMessageList() }}
                ></AddMessage>
            </div>
        </div>
    )
};

export default Order